
@charset "UTF-8";
@import "reset";
@import "common";
.cf {
  zoom: 1; }
  .cf:before, .cf:after {
    content: "";
    display: table; }
  .cf:after {
    clear: both; }

.inlineBlock{
    display: inline-block;
}
.fl{
    float: left;
}
.fr{
    float: right;
}
$green:#009688;
.bg-body{
    background-color: rgba(245, 245, 245, 1);
    color: #666;
}
.header{
    width: 100%;
    height:pxTorem(100px);
    background: $green;
    padding:pxTorem(20px) pxTorem(20px);
    box-sizing: border-box;
}
.logo{
    width: pxTorem(236px);
    height:pxTorem(60px);
}
.search{
    background: #fff;
    padding:pxTorem(20px) pxTorem(20px);
    line-height: 20px;
}
.search input{
    width:pxTorem(710px);
    height:pxTorem(80px);
    padding-left:pxTorem(20px);
    color: rgba(193, 193, 193, 1);
    font-size: 28px;
    box-sizing: border-box;
    outline: none;
    border: pxTorem(2px) solid rgba(229, 229, 229, 1);
}
.navList{
    background: #fff;
}
.navList ul{
    padding-left:10px;
    clear: both;
}
.navList ul li{
    float: left;
    width: pxTorem(223px);
    height: pxTorem(70px);
    line-height:pxTorem(70px);
    background: $green;
    color: #fff;
    border-radius: 2px;
    margin-right:pxTorem(20px);
    text-align: center;
    @include font-dpr(24px);
    margin-bottom:pxTorem(20px);
    border-radius: 2px;
}

.navList ul li:nth-child(3),.navList ul li:nth-child(6){
    margin-right: 0;
}
.downLoad{
    position: relative;
    margin:pxTorem(20px) 0;
    padding:pxTorem(20px);
    box-sizing: border-box;
    width: 100%;
    height: pxTorem(180px);
    line-height: 20px;
    background-color: rgba(247, 255, 253, 1);
    @include font-dpr(28px);
    line-height:pxTorem(41px);
    img{
        width:pxTorem(140px);
        height:pxTorem(140px);
        margin-right:pxTorem(21px);
    }
    .downBtn{
        position: absolute;
        top: 50%;
        margin-top:pxTorem(-30px);
        right:pxTorem(20px);
    }
    .green{
        color: $green;
        @include font-dpr(24px);
    }
    .col666{
        padding-top:pxTorem(35px);

    }
}
.col666{
    color: #666;
}
.hot{
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    .title{
       width: 100%;
       height:pxTorem(100px);
       line-height: pxTorem(100px);
       color: #fff;
       @include font-dpr(30px);
       left: 20px;
       color: rgba(102, 102, 102, 1);
       border-bottom: 1px solid rgb(245,245,245);
       box-sizing: border-box;
    }
    .content{
       width: 100%;
       height:pxTorem(230px);
       padding-top: pxTorem(20px);
       ul{
           clear: both;
           li{
               float: left;
               text-align: center;
               width:pxTorem(140px);
               margin-right:pxTorem(50px);
               box-sizing: border-box;
               p{
                   width:pxTorem(140px);
                   text-align: center;
                   white-space:nowrap;
                   text-overflow:ellipsis;
                   overflow:hidden;
                   //font-size:24px;
               }
               img{
                   width:pxTorem(140px);
                   height: pxTorem(140px);
                   margin-bottom:pxTorem(10px);
               }
               &:nth-child(4){
                    margin-right: 0;
               }
           }

       }
    }
}
.recommend{
    width:100%;
    background: #fff;
    margin-top:pxTorem(20px);
    box-sizing: border-box;

    .title{
        height:pxTorem(100px);
        line-height:pxTorem(100px);
        padding: 0 pxTorem(20px);
        font-size:15px;
    }
    .content{
        ul{
            li{
               position: relative;
               width: 100%;
               border-top:pxTorem(2px) solid rgb(245,245,245);
               padding:pxTorem(20px);
               line-height:pxTorem(35px);
               @include font-dpr(24px);
               box-sizing: border-box;
               img{
                   width:pxTorem(140px);
                   height: pxTorem(140px);
                   vertical-align: middle;
                   margin-right:pxTorem(20px);
               }
              .downDtn{
                  width:pxTorem(140px);
                  height: pxTorem(60px);
                  line-height:pxTorem(60px);
                  background: $green;
                  color: #fff;
                  @include font-dpr(28px);
                  border-radius:pxTorem(4px);
                  text-align: center;
                  margin-top:pxTorem(40px);
              }
            }
        }
    }
}

.font28 {
    @include font-dpr(28px);
}
.downloadMask{
    position: fixed;
    bottom: 0;
    width: 100%;
    height:pxTorem(108px);
    background: rgba(16, 16, 16, .8);
    color: #fff;
    @include font-dpr(28px);
    padding: pxTorem(15px) pxTorem(20px) pxTorem(15px) pxTorem(34px);
    box-sizing: border-box;
    img{
       width: pxTorem(80px);
       height: pxTorem(80px);
       margin: 0 pxTorem(23px) 0 pxTorem(34px);
    }
    p{
      text-align:left;
      margin-top: 2px;
    }
}
.downBtn{
        display: inline-block;
        width:pxTorem(160px);
        height: pxTorem(60px);
        line-height: pxTorem(60px);
        background-color: rgba(0,150,136,1);
        color: #fff;
        text-align: center;
        margin-top:pxTorem(10px);
        border-radius:4px;
        color: #fff;
        @include font-dpr(28px);
    }

.comheader{
    position: relative;
    color: #fff;
    padding:0 pxTorem(20px);
    @include font-dpr(30px);
    box-sizing: border-box;
    line-height:pxTorem(100px);
}
.i-back{
    margin-right:pxTorem(10px);
}
.i-home{
    position: absolute;
    right:pxTorem(20px);
}
.search-body .search input{
    width:pxTorem(600px);
    height: pxTorem(80px);
}
.search .btn{
    display: inline-block;
    width:pxTorem(100px);
    height: pxTorem(80px);
    line-height:pxTorem(80px);
    background: $green;
    margin-left:pxTorem(10px);
}
.result{
    background: #fff;
    height:pxTorem(120px);
    box-sizing:border-box;
    padding: pxTorem(48px) pxTorem(20px) pxTorem(28px) pxTorem(20px);
    color: #666;
    @include font-dpr(30px);
}
.green{
    color: $green;
}
.content{
    background: #fff;
        ul{
            li{
               position: relative;
               width: 100%;

               padding:pxTorem(20px);
               line-height:pxTorem(35px);
               @include font-dpr(24px);
               box-sizing: border-box;
               img{
                   width:pxTorem(140px);
                   height: pxTorem(140px);
                   vertical-align: middle;
                   margin-right:pxTorem(20px);
               }
              .downDtn{
                  width:pxTorem(140px);
                  height: pxTorem(60px);
                  line-height:pxTorem(60px);
                  background: $green;
                  color: #fff;
                  @include font-dpr(28px);
                  border-radius:pxTorem(4px);
                  text-align: center;
                  margin-top:pxTorem(40px);
              }
            }
        }
    }
 .xs-search{
     width:pxTorem(160px);
     height: pxTorem(64px);
     background: #fff;
     border-radius:pxTorem(50px);
     margin-right:pxTorem(59px);
 }

.search-body,.allSort-body,.webGame-body,.noPage-body,.latestUpdate-body,.gameContent-body{
    background: rgb(245,245,245);
}
.com-ul{
    width: 100%;
    background: #fff;
    padding:pxTorem(20px) pxTorem(20px) pxTorem(20px) pxTorem(23px);
    box-sizing: border-box;
    @include font-dpr(28px);
}
.com-ul li{
    width:pxTorem(220px);
    box-sizing: border-box;
    height:pxTorem(80px);
    line-height:pxTorem(80px);
    float: left;
    background:rgb(245,245,245);
    margin:0 pxTorem(20px) pxTorem(20px) 0;
    text-align: center;
    color: #666;
    border-radius: 2px;
}
.com-ul li.active{
    color: #FFF;
    background: $green;
}
.com-ul li:nth-child(3n){
    margin-right: 0;
}
.lable-title{
    height:pxTorem(100px);
    line-height:pxTorem(100px);
    background: #fff;
    padding-left:pxTorem(23px);
    @include font-dpr(28px);
    color: #666;
    font-weight: bold;
    box-sizing: border-box;
    border-bottom: 1px solid rgb(245,245,245);
}
.mb23{
    margin-bottom:pxTorem(23px);
}
.hotRank-body{
    background: rgb(245,245,245);
}
.com-nav{
    width: 100%;
    height:pxTorem(100px);
    line-height:pxTorem(100px);
    background:#fff;
    box-sizing: border-box;
    margin-bottom:2px;
    li{
        width: 50%;
        float: left;
        box-sizing: border-box;
        @include font-dpr(30px);
        color: #666;
        text-align: center;
        &.active{
            color: $green;
            border-bottom: 2px solid $green;
            position: relative;
            z-index: 2;
        }
    }
    li.small-li{
      width:25%;
    }
}
.newGame,.single,.webGame{
    display: none;
}
.nav-content{
    margin-top:pxTorem(23px);
}
.webGame-body .hotSort{
    display: none;
}
.no-content{
    color: #666;
    text-align: center;
    @include font-dpr(30px);
    padding-top:pxTorem(110px);
}
.font48{
    @include font-dpr(48px);
}
.font20{
     @include font-dpr(20px);
}
.font24{
     @include font-dpr(24px);
}

.bold{
    font-weight: bold;
}
.no-content .backBtn{
    display: inline-block;
    width:pxTorem(500px);
    height: pxTorem(80px);
    line-height: pxTorem(80px);
    color: #fff;
    text-align: center;
    @include font-dpr(24px);
    border-radius: 2px;
    background: $green;
    margin-top: pxTorem(72px);
}
.gameContent-body .down{
    @include font-dpr(28px);
    background: #fff;
    padding:pxTorem(20px) pxTorem(20px) pxTorem(40px) pxTorem(20px);
    color: #666;
    line-height:pxTorem(41px);
    img{
        width:pxTorem(140px);
        height:pxTorem(140px);
        margin-right:pxTorem(21px);
    }
    .font20{
        color: #737373;
        span{
            display: inline-block;
            padding:pxTorem(5px) pxTorem(15px);
            text-align: center;
            margin-right: pxTorem(10px);
            background: rgb(240,240,240);
        }
    }
    .btn{
        width: pxTorem(700px);
        height: pxTorem(70px);
        line-height: pxTorem(70px);
        color: #fff;
        text-align: center;
        background: $green;
        margin:pxTorem(30px)  auto auto  auto;
    }
}
.mtb5{
    margin:pxTorem(5px) 0;
}
.mt20{
    margin-top:pxTorem(20px);
}
.gameContent-body .com-nav li{
    width: 50%;
}
.gameContent-body .carousel{
    width: 100%;
    height:pxTorem(280px);
    margin:pxTorem(20px) 0 ;
}

.gameContent-body  .nav-content{
    margin-top: 0;
    line-height:pxTorem(40px);
    .intro{
        color: #666;
        .bgfff{
            background: #fff;
        }
        .pd20{
            padding:pxTorem(20px);
            background: #fff;
        }

        .font32{
            @include font-dpr(32px);
            margin-bottom:pxTorem(20px);
        }
        .mt20{
            margin-top:pxTorem(20px);
        }
        .carousel{
            //margin:pxTorem(20px);
            width: 100%;
            height:pxTorem(280px);
        }
    }
}
.mtb20{
    margin: 20px 0;
}
.pl20{
    padding-left:pxTorem(20px);
}
.pt20{
    padding-top:pxTorem(20px);
}
.gameContent-body .hot{
    margin:pxTorem(20px) 0 ;
}
.gameContent-body .recommend{
    padding-bottom:pxTorem(120px);
}
.more{
    position: fixed;
    bottom: 0;
    width: 100%;
    height:pxTorem(120px);
    line-height:pxTorem(120px);
    @include font-dpr(28px);
    color: #666;
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    border-top: 1px solid rgb(245,245,245);
}
.bgfff{
    background: #fff;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
